import type { Column } from "@/components/CrudPage/type";
import { computed, ref } from "vue";
const crudViewRef = ref();
const formData = computed(() => {
  return crudViewRef.value?.formData() || {};
});

const autoFillDefaultValue = () => {
  const row = crudViewRef.value?.formData();
  if (!row) return;
  row.domainRoute = `${row.domain}`.toLowerCase();
  row.classRoute = `${row.className}`.toLowerCase();
  row.dbTable = `${row.domain}_${row.className}`.toLowerCase();
};
// 列配置
const columns: Column[] = [
  {
    label: "域",
    prop: "domain",
    create: true
  },
  {
    label: "类名",
    prop: "className",
    create: true
  },
  {
    label: "数据表",
    prop: "dbTable",
    create: true,
    edit: true
  },
  {
    label: "备注",
    prop: "comment",
    create: true,
    edit: true
  },
  {
    label: "域路由",
    prop: "domainRoute",
    hide: true,
    create: true,
    edit: true,
    colProps: { span: 24 },
    fieldSlots: {
      prepend: () => <span>{`/api/v1/`}</span>,
      append: () => <span>{`/${formData.value.classRoute}/*`}</span>
    }
  },
  {
    label: "表路由",
    prop: "classRoute",
    hide: true,
    create: true,
    edit: true,
    colProps: { span: 24 },
    fieldSlots: {
      prepend: () => (
        <span>{`/api/v1/${formData.value.domainRoute || "DOMAIN_ROUTE"}/`}</span>
      ),
      append: () => <span>{"/*"}</span>
    }
  },
  {
    label: "权限检查",
    prop: "auth",
    create: true,
    edit: true,
    valueType: "switch",
    cellRenderer(data) {
      return (
        <el-Tag type={data.row.auth ? "success" : "info"}>
          {data.row.auth ? "是" : "否"}
        </el-Tag>
      );
    },
    renderField(value, onChange) {
      return (
        <el-switch
          v-model={value}
          inline-prompt
          active-value={1}
          inactive-value={-1}
          onChange={onChange}
        />
      );
    }
  },
  {
    label: "操作",
    prop: "operation",
    slot: "operation"
  },
  {
    label: "",
    prop: "",
    hide: true,
    hasLabel: false,
    create: true,
    edit: true,
    renderField() {
      return (
        <el-button
          type="primary"
          onClick={() => {
            autoFillDefaultValue();
          }}
        >
          自动补充
        </el-button>
      );
    }
  }
];

export function useModuleTableProvider() {
  return {
    columns,
    crudViewRef,
    autoFillDefaultValue
  };
}
